<template>
	<view class="e-skeleton-navbar" :style="[customStyle]">
		<view
			class="e-skeleton-navbar__placeholder"
			v-if="config.fixed && config.placeholder"
			:style="{
				height: addUnit(getPx(config.height) + sys().statusBarHeight!, 'px')
			}"
		></view>
		<view :class="[config.fixed && 'e-skeleton-navbar--fixed']">
			<e-status-bar v-if="safeAreaInsetTop"></e-status-bar>
			<view class="e-skeleton-navbar__content">
				<view class="e-skeleton-navbar__content__left" v-if="config.showLeft">
					<SkeletonBlock>
						<view class="e-skeleton-navbar__content__left__text"></view>
					</SkeletonBlock>
				</view>
				<view class="e-skeleton-navbar__content__title">
					<SkeletonBlock>
						<view class="e-skeleton-navbar__content__title__text" ></view>
					</SkeletonBlock>
				</view>
				<view class="e-skeleton-navbar__content__right">
					<SkeletonBlock>
						<view class="e-skeleton-navbar__content__right__text"></view>
					</SkeletonBlock>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
	name: 'skeleton-navbar'
});
</script>

<script lang="ts" setup>
import { addUnit, getPx } from '../../libs/utils/_utils';
import { sys } from '../../libs/utils';
import SkeletonBlock from './block.vue';
const props = withDefaults(
	defineProps<{
		config: {
			fixed: boolean;
			zIndex: number;
			placeholder: boolean;
			height: number;
			showLeft: boolean;
			showRight: boolean;
		};
		safeAreaInsetTop: boolean;
		customStyle?: Record<any, any>|string;
		animate?: boolean;
	}>(),
	{
		config: () => ({
			fixed: true,
			zIndex: 985,
			placeholder: true,
			height: 44,
			showLeft: true,
			showRight: false
		})
	}
);
</script>

<style lang="scss" scoped>
@import '../../libs/theme/skeleton-navbar.scss';
</style>
